<template>
  <div class="page-container">
    <el-row>
      <el-card class="tl-card" shadow="hover" :body-style="{padding: '15px', height: '100%'}">
        <el-row align="middle" class="stage-row">
          <el-col :span="2" style="color: var(--el-text-color-primary) !important">订单阶段</el-col>
          <el-col :span="1">待审批</el-col>
          <el-icon>
            <ele-DArrowRight/>
          </el-icon>
          <el-col :span="1">已审批</el-col>
          <el-icon>
            <ele-DArrowRight/>
          </el-icon>
          <el-col :span="1">待付款</el-col>
          <el-icon>
            <ele-DArrowRight/>
          </el-icon>
          <el-col :span="1">待发货</el-col>
          <el-icon>
            <ele-DArrowRight/>
          </el-icon>
          <el-col :span="1">待收货</el-col>
          <el-icon>
            <ele-DArrowRight/>
          </el-icon>
          <el-col :span="1">已完成</el-col>

          <el-col :span="2" style="margin-left: 20px">重发补发</el-col>
          <el-col :span="2">待退货</el-col>
          <el-col :span="2">已退货</el-col>
          <el-col :span="2">已取消</el-col>
        </el-row>
        <el-row align="middle">
          <el-col :span="2">当前数据</el-col>
          <el-col :span="1">{{ stageData['6'] }}</el-col>
          <el-col :span="1" style="margin-left: 69px">{{ stageData['7'] }}</el-col>
          <el-col :span="1" style="margin-left: 69px">{{ stageData['0'] }}</el-col>
          <el-col :span="1" style="margin-left: 69px">{{ stageData['1'] }}</el-col>
          <el-col :span="1" style="margin-left: 69px">{{ stageData['2'] }}</el-col>
          <el-col :span="1" style="margin-left: 69px">{{ stageData['3'] }}</el-col>

          <el-col :span="2" style="margin-left: 20px">{{ stageData['11'] }}</el-col>
          <el-col :span="2">{{ stageData['9'] }}</el-col>
          <el-col :span="2">{{ stageData['12'] + stageData['14'] }}</el-col>
          <el-col :span="2">{{ stageData['4'] }}</el-col>
        </el-row>
      </el-card>
      <el-card shadow="hover" style="width: 29%" :body-style="{ padding: `8px 0 0` }">
        <el-row justify="space-between" style="padding: 0 11px">
          <h4>采购数据总览</h4>
          <!--          <el-button type="primary" link size="small">查看详情</el-button>-->
        </el-row>
        <el-table size="small" :data="[{}]" border style="margin-top:10px" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column label="本月采购单总数">{{ monthData.totalOrderNum }}</el-table-column>
          <el-table-column label="本月退款采购单数">{{ monthData.refundOrderNum }}</el-table-column>
          <el-table-column label="本月订单总金额">{{ monthData.totalOrderAmount }}</el-table-column>
          <el-table-column label="本月退款金额">{{ monthData.refundOrderAmount }}</el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <el-row style="margin: 10px 0" justify="space-between">
      <el-row>
        <el-button size="small" type="primary" :icon="Plus" @click="createVisible = 'PURCHASE_ORDER'">新建</el-button>
        <el-button size="small" type="warning" @click="resetParams">全部数据</el-button>
        <el-date-picker
            style="margin-left: 10px"
            v-model="params.searchDate"
            type="daterange"
            size="small"
            unlink-panels
            range-separator="至"
            start-placeholder="下单日期起始"
            end-placeholder="下单日期结束"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts">
        </el-date-picker>
      </el-row>
      <el-row>
        <el-button size="small" type="warning" plain @click="openDraft">草稿箱</el-button>
        <el-button type="default" size="small" @click="headerVisible = true">表头设置</el-button>
      </el-row>
    </el-row>


    <div class="table-box" v-show="header.length > 0">
      <el-table class="table-list" size="small" :data="tableData" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}">
        <!--        <el-table-column type="selection" width="30" fixed="left"></el-table-column>-->
        <el-table-column
            v-for="item in header"
            :key="item.label"
            :prop="item.label"
            :min-width="item.width"
            :class-name="item.label !== 'productName' ? '' : 'order-goods'">
          <template #header>
            <span v-if="item.label !== 'productName'" style="margin-right:2px;">{{ item.name }}</span>
            <el-row v-else class="order-row-item order-border-none">
              <el-col :span="6">产品名称</el-col>
              <el-col :span="6">详情规格</el-col>
              <el-col :span="4">数量</el-col>
              <el-col :span="4">单价(元)</el-col>
              <el-col :span="4">小计(元)</el-col>
            </el-row>
            <!-- 可搜索表头 -->
            <el-popover placement="bottom" :width="200" trigger="click" v-if="item.isFilter && item.filter == 'search'">
              <template #reference>
                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                  <ele-Search/>
                </el-icon>
              </template>
              <el-input :placeholder="`请输入${item.name}`" v-model.trim="params[item.label]" size="small" clearable @input="getList"/>
            </el-popover>
            <!-- 可筛选表头 -->
            <el-popover placement="bottom" :width="120" trigger="click" v-if="item.isFilter && item.filter == 'filter'">
              <template #reference>
                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                  <ele-Filter/>
                </el-icon>
              </template>
              <el-scrollbar max-height="600px">
                <el-radio-group v-model="params[item.label]" size="small" v-if="filterData[item.label] && filterData[item.label].length > 0">
                  <el-radio v-for="radio in filterData[item.label]" :key="radio.name" :label="radio.value" @click.prevent="radioChange(radio.value, item.label)">{{ radio.name }}
                  </el-radio>
                </el-radio-group>
                <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
              </el-scrollbar>
            </el-popover>
          </template>

          <template v-slot="{row}">
            <!-- 采购单号 -->
            <div v-if="item.label === 'orderNo'" class="primary" @click="openDetail(row)">{{ row.orderNo }}</div>
            <!-- 产品名称 -->
            <div v-else-if="item.label === 'productName'" style="flex:1;display:flex;flex-direction: column;">
              <div v-for="(product, index) in row.productItems" :key="product.id" style="flex: 1;height:100%">
                <el-row class="order-row-item" style="height:100%">
                  <el-col :span="6">{{ product.name }}</el-col>
                  <el-col :span="6">{{ product.specification }}</el-col>
                  <el-col :span="4">{{ product.num }}</el-col>
                  <el-col :span="4">{{ product.price.toFixed(2) }}</el-col>
                  <el-col :span="4">{{ product.total.toFixed(2) }}</el-col>
                </el-row>
                <el-divider style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)" v-if="index < row.productItems.length - 1"/>
              </div>
            </div>
            <div v-else-if="item.label === 'type'">{{ row.type == 0 ? '个人' : '企业' }}</div>
            <div v-else-if="'source stage paymentType'.includes(item.label)">
              <div v-for="dict in filterData[item.label]" v-show="dict.value == row[item.label]">{{ dict.name }}</div>
            </div>
            <!--            <div v-else-if="item.label === 'source'">-->
            <!--              <template v-for="dict in filterData['orderSourceType']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
            <!--            </div>-->
            <!--            <div v-else-if="item.label === 'stage'">-->
            <!--              <template v-for="dict in filterData['OrderStage']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
            <!--            </div>-->
            <!--            <div v-else-if="item.label === 'paymentType'">-->
            <!--              <template v-for="dict in filterData['PaymentType']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
            <!--            </div>-->
            <div v-else>{{ row[item.label] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
          <template v-slot="{row}">
            <el-button size="small" type="primary" link v-if="row.stage == '1' || row.stage == '2'">退款</el-button>
            <el-button size="small" type="primary" @click="orderCancel(row)" link v-if="row.stage != '4' && row.stage != '5' && ((row.stage == '13' || row.stage == '14') && row.contractAmount != row.refundAmount)">订单取消</el-button>
            <el-button size="small" type="primary" link v-if="['3','10','11','12','13','14'].includes(row.stage)">售后</el-button>
            <el-button size="small" type="primary" link>复制</el-button>
            <el-button size="small" type="primary" v-if="row.stage == '0'" link @click="payAmount(row)">付款</el-button>
            <el-button size="small" type="primary" v-if="row.marketOrderId && row.stage == '3' && row.commentState != '2'" link @click="commentModel(row)">评价</el-button>
          </template>
        </el-table-column>
        <el-table-column label="发送方式" width="90" fixed="right">
          <template v-slot="{row}">
            <el-button size="small" type="primary" v-if="row.directSend == 1" link @click="sendPurchase(row)"><i class="fa fa-paper-plane-o"/>直发</el-button>
            <el-button size="small" type="primary" v-else link @click="wechatSend(row)"><i class="fa fa-weixin"/>微信</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-block">
      <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size" :page-sizes="[10, 30, 50, 70, 100]" :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true" @size-change="sizeChange" @current-change="currentChange"/>
    </div>

    <!-- 采购单详情 -->
    <procure-detail v-model:dialogDrawer="detailVisible" v-model:form="detailData" v-model:dictMap="dictMap" @onSubmit="resetParams"/>
    <!-- 创建采购单 -->
    <purchase-order v-model:code="createVisible" v-model:edit-form="editData" @callback="formCallback"/>
    <!-- 商品评价 -->
    <comment-create v-if="commentVisible" v-model:dialogDrawer="commentVisible" v-model:form="purchaseMap" v-model:may-list="mayCommentList" @onSubmit="resetParams"></comment-create>

    <el-dialog title="草稿箱" v-model="draftVisible" destroy-on-close width="55%" @close="draftVisible = false" top="5vh">
      <el-table class="table-box" size="small" :data="draftList" stripe border :cell-style="{textAlign: 'center'}"
                :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}">
        <el-table-column label="订单号/合同编号" prop="orderNo" width="200"/>
        <el-table-column label="供应商简称" prop="shortName" width="180"/>
        <el-table-column label="产品清单" width="260">
          <template v-slot="{row}">
            <span v-if="row.productItems" v-for="(item, i) in row.productItems" :key="item.id">{{ item.name + (i < row.productItems.length - 1 ? '，' : '') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总金额（元）" prop="productAmountSum" width="140"/>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" text type="primary" :icon="Edit" @click="openEdit(row)">编辑</el-button>
            <el-button size="small" text type="danger" :icon="Delete" @click="deleteDraft(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-block">
        <el-pagination v-model:currentPage="draftParams.current" v-model:page-size="draftParams.size" :page-sizes="[10, 30, 50, 70, 100]"
                       :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                       :total="draftTotal" :hide-on-single-page="true" @size-change="draftSizeChange"
                       @current-change="draftCurrentChange"/>
      </div>
      <template #footer>
        <el-button size="small" @click="draftVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 表头设置对话框 -->
    <el-dialog title="表头设置" v-model="headerVisible" destroy-on-close width="40%" @close="headerVisible = false" @opened="dialogOpened" top="5vh">
      <el-table ref="tableHeaderRef" :data="allHeader" @selection-change="headerChange" stripe border :cell-style="{textAlign: 'center'}" row-key="label"
                :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}">
        <el-table-column type="selection" width="90"/>
        <el-table-column label="表头名称" prop="name"/>
      </el-table>
      <template #footer>
        <el-button size="small" @click="headerVisible = false">关闭</el-button>
        <el-button size="small" type="primary" @click="submitHeader">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import {Plus, Edit, Delete} from '@element-plus/icons-vue'
import {getDictByCodes} from '/@/api/sys/dict'
import purchaseOrderApi from '/@/api/supplier/purchaseOrder'
import ProcureDetail from '/@/views/procure/components/ProcureDetail.vue'
import PurchaseOrder from '/@/views/matter/supplier/PurchaseOrder.vue'
import CommentCreate from '/@/views/procure/components/CommentCreate.vue'
import {getPurchaseQuotes} from '/@/api/supplier/quoteOrder'
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import { useRoute } from 'vue-router'

import api from '/@/api/commonApi'

export default {
  name: 'Purchase',
  components: {
    ProcureDetail,
    PurchaseOrder,
    CommentCreate
  },
  setup() {
    const route = useRoute()
    const tableHeaderRef = ref()
    const state = reactive({
      params: {
        currentPurchaseId:'',
        current: 1,
        size: 10,
        searchDate: [],
        shortName: null,
        orderNo: null,
        stage: null,
        paymentType: null,
        source: null,
        type: null
      },
      total: 0,
      createVisible: '',
      monthData: {
        totalOrderNum: 0,
        totalOrderAmount: 0,
        refundOrderNum: 0,
        refundOrderAmount: 0
      },
      stageData: {
        '0': 0,   // 待付款
        '1': 0,   // 待发货
        '2': 0,   // 已发货
        '3': 0,   // 已完成
        '4': 0,   // 已关闭
        '6': 0,   // 待审批
        '7': 0,   // 已审批
        '9': 0,   // 待退货
        '11': 0,  // 重发补发
        '12': 0,  // 退货
        '14': 0  // 退货退款
      },  // 阶段对应的统计数据
      tableData: [],
      dictMap: {},
      filterData: {
        type: [{name: '个人', value: 0}, {name: '企业', value: 1}],
        source: [],
        stage: [],
        paymentType: []
      },
      headerVisible: false,
      selectedHeader: [],
      allHeader: [{
        filter: 'search',
        isFilter: true,
        label: 'orderNo',
        name: '采购/合同编号',
        width: '120',
        sort: 0
      }, {
        filter: 'search',
        isFilter: true,
        label: 'shortName',
        name: '供应商简称',
        width: '120',
        sort: 1
      }, {
        filter: '',
        isFilter: false,
        label: 'productName',
        name: '产品清单',
        width: '500',
        sort: 2
      },/* {
          name: '详情规格',
          isFilter: false,
          filter: '',
          label: 'specification'
        }, {
          name: '数量',
          isFilter: false,
          filter: '',
          label: 'num'
        }, {
          name: '单价(元)',
          isFilter: false,
          filter: '',
          label: 'price'
        }, {
          name: '小计(元)',
          isFilter: false,
          filter: '',
          label: 'total'
        },*/ /*{
          name: '折扣',
          isFilter: false,
          filter: '',
          label: 'discount'
        },*/ {
        filter: '',
        isFilter: false,
        label: 'contractAmount',
        name: '采购单总金额',
        width: '100',
        sort: 3
      }, {
        filter: 'filter',
        isFilter: true,
        label: 'stage',
        name: '采购单阶段',
        width: '100',
        sort: 4
      }, {
        filter: 'filter',
        isFilter: true,
        label: 'paymentType',
        name: '结款方式',
        width: '90',
        sort: 5
      }, {
        filter: '',
        isFilter: false,
        label: 'orderDate',
        name: '下单日期',
        width: '100',
        sort: 6
      }, {
        filter: '',
        isFilter: false,
        label: 'predictDeliverDate',
        name: '预计交货日期',
        width: '100',
        sort: 7
      }, {
        filter: 'filter',
        isFilter: true,
        label: 'source',
        name: '采购渠道',
        width: '90',
        sort: 8
      }, {
        filter: 'filter',
        isFilter: true,
        label: 'type',
        name: '采购单类别',
        width: '100',
        sort: 9
      }],
      header: [],
      shortcuts: [
        {
          text: '上一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          }
        },
        {
          text: '前1个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          }
        },
        {
          text: '前3个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          }
        }],
      detailVisible: false,
      detailData: {},
      // 草稿箱
      draftParams: {
        current: 1,
        size: 10,
        draft: 1
      },
      draftTotal: 0,
      draftVisible: false,
      editData: null,
      draftList: [],
      mayCommentList: [], // 可评价商品
      purchaseMap: {}, // 采购单
      commentVisible: false, // 评价模态框
    })

    onMounted(() => {
      //获取当前采购单ID
      if(route.params.id){
        state.currentPurchaseId = route.params.id
      }

      // 获取表头字段
      purchaseOrderApi.getHeaders().then(res => {
        if (res.data && res.data.length > 0) {
          res.data.forEach(item => {
            for (let i = 0; i < state.allHeader.length; i++) {
              let headerItem = state.allHeader[i]
              if (item.label == headerItem.label) {
                state.header.push(headerItem)
              }
            }
          })
        } else {
          state.header = state.allHeader
        }
      }).catch(e => console.log(e))
      // 先加载完字典再请求分页, 表格数据渲染需要字典数据
      getDictByCodes(['orderSourceType', 'OrderStage', 'PaymentType', 'DeliveryType']).then(res => {
        state.filterData.paymentType = res.data['PaymentType']
        state.filterData.source = res.data['orderSourceType']
        state.filterData.stage = res.data['OrderStage']
        state.dictMap = res.data
        getList()
      }).catch(e => console.log(e))
      purchaseOrderApi.getMonthCal().then(res => state.monthData = res.data).catch(e => console.log(e))
      purchaseOrderApi.getStageData().then(res => Object.keys(state.stageData).forEach(key => state.stageData[key] = res.data[key] || 0)).catch(e => console.log(e))

    })

    const resetParams = () => {
      state.params = {
        current: 1,
        size: 10,
        searchDate: [],
        shortName: null,
        orderNo: null,
        stage: null,
        paymentType: null,
        source: null,
        type: null
      }
      getList()
    }
    // 条数切换
    const sizeChange = size => {
      state.params.size = size
      currentChange(1)
    }
    // 页码切换
    const currentChange = current => {
      state.params.current = current
      getList()
    }
    // 获取页面数据
    const getList = () => {
      purchaseOrderApi.getOrderPage(state.params).then(res => {
        state.total = res.data.total
        state.tableData = res.data.records

        if(state.currentPurchaseId){
          for (let i = 0; i < state.tableData.length; i++) {
            if(state.tableData[i].id == state.currentPurchaseId){
              openDetail(state.tableData[i])
              state.currentPurchaseId = ''
              break
            }
          }
        }
      }).catch(e => console.log(e))
    }

    // 打开采购单详情页
    const openDetail = (row) => {
      state.detailData = Object.assign({}, row)
      state.detailVisible = true
    }
    const radioChange = (val, name) => {
      // 重复点击同个值取消选中
      state.params[name] = state.params[name] == val ? null : val
      getList()
    }
    // 编辑
    const openEdit = (purchaseOrder) => {
      state.editData = Object.assign({}, purchaseOrder)
      // 获取关联的报价单列表
      getPurchaseQuotes(state.editData.id).then(res => {
        state.editData.quotationList = res.data
        state.createVisible = 'PURCHASE_ORDER'
      })
    }
    // 打开草稿箱
    const openDraft = () => {
      state.draftParams.current = 1
      state.draftParams.size = 10
      getDraftData()
      state.draftVisible = true
    }
    const draftSizeChange = (size) => {
      state.draftParams.size = size
      draftCurrentChange(1)
    }
    const draftCurrentChange = (current) => {
      state.draftParams.current = current
      getDraftData()
    }
    // 加载草稿分页数据
    const getDraftData = () => {
      purchaseOrderApi.getOrderPage(state.draftParams).then(res => {
        state.draftList = res.data.records
        state.draftTotal = res.data.total
      }).catch(e => console.log(e))
    }
    // 删除草稿
    const deleteDraft = (purchaseOrder) => {
      purchaseOrderApi.removeDraft(purchaseOrder).then(res => {
        if (res.data) {
          ElMessage.success('删除成功！')
          getDraftData()
        }
      }).catch(e => console.log(e))
    }
    // 取消订单
    const orderCancel = (order) => {
      purchaseOrderApi.cancelOrder(order).then(res => {
        if (res.data) {
          ElMessage.success('取消订单成功')
          getList()
        }
      }).catch(e => console.log(e))
    }
    // 订单付款
    const payAmount = (order) => {

    }
    // 表头对话框的回调
    const dialogOpened = () => {
      state.header.forEach(item => {
        state.selectedHeader.push(item)
        tableHeaderRef.value.toggleRowSelection(item, true)
      })
    }
    const headerChange = (list) => {
      if (state.selectedHeader.length > list.length) {
        state.selectedHeader = list
      } else {
        const item = list[list.length - 1]
        state.selectedHeader.splice(item.sort, 0, item)
      }
    }
    // 保存表头数据
    const submitHeader = () => {
      purchaseOrderApi.saveHeader(state.selectedHeader).then(res => {
        state.header = Object.assign([], state.selectedHeader)
        state.headerVisible = false
        ElMessage.success('保存成功！')
      }).catch(e => console.log(e))
    }
    // 保存/关闭采购单后的回调
    const formCallback = () => {
      state.editData = null
      getList()
    }
    // 采购单直发
    const sendPurchase = (purchaseOrder) => {
      ElMessageBox.confirm('确定把采购单 “' + purchaseOrder.title + '” 发送给对方？', '提示', {
        confirmButtonText: '发送',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        purchaseOrderApi.purchaseSend(purchaseOrder).then(res => {
          if (res.data) {
            ElMessage.success('发送成功！')
          }
        }).catch(e => console.log(e))
      }).catch(e => console.log(e))
    }
    // 微信发送采购单
    const wechatSend = (purchaseOrder) => {
      navigator.clipboard.writeText(import.meta.env.VITE_SHARE_URL + '/purchaseOrder/' + purchaseOrder.id).then(() => ElMessage.success('复制成功！'))
    }
    // 商品评价
    const commentModel = (val) => {
      console.log(val);
      let skuIds = []
      val.productItems.forEach(e => {
        skuIds.push(e.productId)
      })
      api.commentsByOrderId({
        orderId: val.marketOrderId,
        skuIds: skuIds
      }).then(res => {
        state.mayCommentList = res.data
        state.purchaseMap = val
        state.commentVisible = true
      })
    }

    return {
      Plus,
      Edit,
      Delete,
      tableHeaderRef,
      ...toRefs(state),
      sizeChange,
      currentChange,
      resetParams,
      openDetail,
      radioChange,
      getList,
      openDraft,
      openEdit,
      deleteDraft,
      formCallback,
      draftSizeChange,
      draftCurrentChange,
      getDraftData,
      orderCancel,
      payAmount,
      submitHeader,
      dialogOpened,
      headerChange,
      wechatSend,
      sendPurchase,
      commentModel
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  .tl-card { // 顶部左边卡片
    width: 70%;
    margin-right: 10px;

    :deep(.el-row) {
      height: 42px;
      text-align: center;
    }

    .stage-row {
      :deep(.el-col) {
        color: var(--el-color-primary);
      }
    }

    :deep(.el-icon) {
      margin: 0 25px;
      font-size: 19px;
    }
  }

  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    .table-list {
      border: 1px solid var(--el-table-border-color);
      border-bottom: none;

      :deep(thead .cell) {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      :deep(thead th:last-child .cell) {
        justify-content: center;
      }

      :deep(thead .el-icon) {
        margin-top: -2px;
        cursor: pointer;
      }

      .primary {
        cursor: pointer;
        color: var(--el-color-primary);
      }

      :deep(.el-button) {
        margin-left: 0;
        margin-right: 12px;
      }

      :deep(.el-table__body td.el-table__cell) {
        border-right: 1px solid var(--el-border-color-light);
        padding: 0;

        &:last-child {
          border-right: none;
        }
      }

      .order-row-item {
        width: 100%;

        :deep(.el-col) {
          border-right: 1px solid var(--el-border-color-light);
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          &:last-child {
            border-right: none;
          }
        }
      }

      .order-border-none {
        :deep(.el-col) {
          border: none;
        }
      }
    }

    .short {
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>
<style lang="scss">
.el-table__body .order-goods .cell {
  min-height: 70px;
  display: flex;
  align-items: stretch;
  padding: 0;
}
</style>
